<template>
  <Form :label-width="100">
    <FormItem label="不触发鼠标事件">
      <i-switch size="small" v-model="markPoint.silent"></i-switch>
    </FormItem>
    <FormItem>
      <Poptip :transfer="true" placement="top" trigger="hover">
        <Button size="small" type="primary"><Icon type="md-add" /> 添加标注</Button>
        <div slot="content">
          <Button class="m-r-5px" type="default" size="small" @click="addMarkPointDataItem('min')">最小值</Button>
          <Button class="m-r-5px" type="default" size="small" @click="addMarkPointDataItem('max')">最大值</Button>
          <Button type="default" size="small" @click="addMarkPointDataItem('average')">平均值</Button>
        </div>
      </Poptip>
    </FormItem>
    <Collapse class="m-t-5px" accordion>
      <Panel :name="$PnUtil.uuid()" v-for="(item, index) in markPoint.data" :key="index">
        {{item.type | typeFilter}}标注
        <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteMarkPointDataItem(index)"><Icon type="md-trash" /></a>
        <div slot="content">
          <FormItem label="名称">
            <Tooltip content="将会作为鼠标滑入辅助线时的文字显示" placement="left">
              <Input size="small" v-model="item.name" placeholder=""/>
            </Tooltip>
          </FormItem>
          <FormItem label="类型">
            <Select :transfer="true" size="small" v-model="item.type">
              <Option v-for="(item, index) in $PnChartDict.markPointDataTypes" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <Tabs size="small">
            <TabPane label="标注图形">
              <FormItem label="图形">
                <Select :transfer="true" size="small" v-model="item.symbol">
                  <Option v-for="(item, index) in $PnChartDict.symbols" :value="item.value" :key="index">{{ item.label }}</Option>
                </Select>
              </FormItem>
              <FormItem label="图形尺寸">
                <InputNumber size="small" :max="1000" :min="0" v-model="item.symbolSize" :active-change="false"></InputNumber>
              </FormItem>
              <FormItem label="旋转角度">
                <InputNumber size="small" :max="360" :min="0" v-model="item.symbolRotate" :active-change="false"></InputNumber>
              </FormItem>
              <FormItem label="主体颜色">
                <PnColorPicker size="small" v-model="item.itemStyle.color" alpha recommend/>
              </FormItem>
              <FormItem label="边框大小">
                <InputNumber size="small" :max="1000" :min="0" v-model="item.itemStyle.borderWidth" :active-change="false"></InputNumber>
              </FormItem>
              <FormItem label="边框类型">
                <Select :transfer="true" size="small" v-model="item.itemStyle.borderType">
                  <Option v-for="(item, index) in $PnChartDict.borderStyles" :value="item.value" :key="index">{{ item.label }}</Option>
                </Select>
              </FormItem>
              <FormItem label="边框颜色">
                <PnColorPicker size="small" v-model="item.itemStyle.borderColor" alpha recommend/>
              </FormItem>
              <FormItem label="阴影大小">
                <InputNumber size="small" :max="1000" :min="0" v-model="item.itemStyle.shadowBlur" :active-change="false"></InputNumber>
              </FormItem>
              <FormItem label="阴影颜色">
                <PnColorPicker size="small" v-model="item.itemStyle.shadowColor" alpha recommend/>
              </FormItem>
              <FormItem label="透明度">
                <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="item.itemStyle.opacity" :active-change="false"></InputNumber>
              </FormItem>
            </TabPane>
            <TabPane label="辅助文本">
              <FormItem label="显示">
                <i-switch size="small" v-model="item.label.show"></i-switch>
              </FormItem>
              <FormItem label="位置">
                <Select :transfer="true" size="small" v-model="item.label.position">
                  <Option v-for="(item, index) in $PnChartDict.scatterLabelPositions" :value="item.value" :key="index">{{ item.label }}</Option>
                </Select>
              </FormItem>
              <FormItem label="旋转角度">
                <InputNumber size="small" :max="360" :min="0" v-model="item.label.rotate" :active-change="false"></InputNumber>
              </FormItem>
              <FormItem label="颜色">
                <PnColorPicker size="small" v-model="item.label.color" alpha recommend/>
              </FormItem>
              <FormItem label="字号">
                <InputNumber size="small" :max="1000" :min="0" v-model="item.label.fontSize" :active-change="false"></InputNumber>
              </FormItem>
            </TabPane>
          </Tabs>
        </div>
      </Panel>
    </Collapse>
  </Form>
</template>

<script>
import PnDesigner from "@/utils/PnDesigner";

export default {
  name: "EchartsMarkPointConfigForm",
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data() {
    return {
      markPoint: this.value
    }
  },
  mounted() {

  },
  methods: {
    addMarkPointDataItem (type) {
      this.markPoint.data.push(PnDesigner.buildMarkPointDataItemConfigData({
        type: type
      }))
    },
    deleteMarkPointDataItem (index) {
      this.markPoint.data.splice(index, 1)
    }
  },
  computed: {},
  watch: {
    value (val) {
      this.markPoint = val;
    }
  },
  filters: {
    typeFilter: function (value) {
      switch (value) {
        case 'min':
          return '最小值'
        case 'max':
          return '最大值'
        case 'average':
          return '平均值'
      }
    }
  }
}
</script>

<style scoped>

</style>
